<template>
  <div class="search">
    <!-- 搜索组件一级路由   $router.back()返回上一个页面-->
    <van-nav-bar
      left-arrow
      title="搜索中心"
      @click-left="$router.back()">
    </van-nav-bar>

    <!-- https://youzan.github.io/vant/#/zh-CN/search -->
    <van-search
      show-action
      placeholder="请输入搜索关键词"
      shape="round"
      v-model.trim="keyword"
      @input="getSuggestion"
    >
      <template #action>
        <div @click="clickSearch">搜索</div>
      </template>
    </van-search>

    <!-- 联想建议 -->
    <van-cell-group v-if="keyword.trim() !== ''">
      <van-cell @click="clickSuggestion(index)" v-for="(item,index) in showSuggestion" :key="index" icon="search">
        <div v-html="item"></div>
      </van-cell>
    </van-cell-group>
    <!-- /联想建议 -->

    <!-- 搜索历史记录 -->
    <van-cell-group v-else>
      <van-cell title="历史记录" v-if="this.history > 0">
      </van-cell>
      <van-cell @click="clickHistory(item)" v-for="(item,index) in history" :key="item" :title="item">
        <van-icon @click.stop="delHistory(index)" name="close" />
      </van-cell>
    </van-cell-group>
    <!-- /搜索历史记录 -->
  </div>
</template>

<script>
import { reqGetSuggestion } from '@/api/search.js'
import { setHistory, getHistory } from '@/utils/storage.js'
export default {
  name: 'Search',
  data () {
    return {
      keyword: '', // 搜索关键字
      suggestion: [], // 联想记忆
      history: getHistory(),
      timeId: null
    }
  },
  // 1.提供一个专门用于展示的计算属性
  // 2.利用v-html进行渲染
  computed: {
    // 应该对this.suggestions中的每一项，都要进行替换处理，如果是关键字需要高亮
    // 得到一个新数组，专门用于展示map
    showSuggestion () {
      // 将item字符串，进行替换，将替换的结果返回
      // item.replace(正则表达式，函数)
      const regExp = new RegExp(this.keyword, 'gi')
      const arr = this.suggestion.map(item => {
        const newStr = item.replace(regExp, (match) => {
          return `<span style='color: red'>${match}</span>`
        })
        return newStr
      })
      return arr
    }
  },
  methods: {
    getSuggestion () {
      // 防抖，就是延长执行，不会立即执行，一段时间没有触发，才会执行
      clearTimeout(this.timeId)
      this.timeId = setTimeout(async () => {
        if (this.keyword.trim() === '') {
          this.suggestion = []
          return
        }
        const res = await reqGetSuggestion(this.keyword)
        // console.log(res.data)
        this.suggestion = res.data.data.options
      }, 300)
    },
    // 点击搜索键搜索
    clickSearch (item) {
      if (this.keyword === '') return
      // 添加历史记录
      this.addHistory(this.keyword)
    },
    // 点击联想记忆搜索
    clickSuggestion (index, item) {
      // 添加历史记录
      this.addHistory(this.suggestion[index])
    },
    // 添加历史记录
    addHistory (str) {
      // 1.把数据追加到前面去
      // 2.如果有相同项，应该删除旧的数据项
      const index = this.history.findIndex(item => item === str)
      if (index !== -1) {
        // 声明历史记录中已经有了这一项，应该删除
        this.history.splice(index, 1)
      }
      this.history.unshift(str)
      setHistory(this.history)
      // 添加完历史进行跳转
      this.$router.push('/searchResult?keyword=' + str)
    },
    // 删除历史记录
    delHistory (index) {
      // 用splice方法删除数组项
      this.history.splice(index, 1)
      // 将历史记录存到本地
      setHistory(this.history)
    },
    // 点击历史记录跳转
    clickHistory (item) {
      // 先添加历史记录
      this.addHistory(item)
    }

  }
}
</script>

<style lang="scss" scoped>
// 控制头部导航栏的通用样式
.van-nav-bar {
  background-color: #3196fa;
  .van-nav-bar__title {
    color: white;
  }
  .van-icon {
    color: white;
  }
}
</style>
